<template>
    <div class="mine">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div class="header">
            <div class="header-l">
                <div class="touxiang">
                    <img style="width:100%;height:100%;" :src="details.avatar" />
                </div>
                <p class="phone">{{details.mobile_phone}}</p>
            </div>
            <div class="header-r">
                <img class="shezhi" @click="shezhi" src="../../assets/img/shezhi.png" />
                <!-- <img class="xiaoxi" @click="xiaoxi" src="../../assets/img/mine/xiaoxi.png" /> -->
            </div>
        </div>
        <div class="jifen-kajuan-hongbao">
            <div class="jifen divs" @click="jifen">
                <p class="p1">{{details.pay_points}}</p>
                <p class="p2">我的积分</p>
            </div>
            <div class="kajuan divs" @click="kajuan">
                <p class="p1">{{details.bonus_count}}</p>
                <p class="p2 ka">我的优惠券</p>
            </div>
        </div>
        <div class="order">
            <div class="order-head">
                <div class="order-head-l">
                    我的订单
                </div>
                <div class="order-head-r" @click="order">
                    <span>查看全部</span>
                    <img src="../../assets/img/ckgd.png" />
                </div>
            </div>
            <div class="order-foot">
                <div class="order-foot-item" @click="order1">

                    <div v-if='num.dfk!=0' class="jiaobiao">{{num.dfk}}</div>

                    <img class="img1" src="../../assets/img/mine/order1.png">
                    <p>待付款</p>
                </div>
                <div class="order-foot-item" @click="order2">

                     <div v-if='num.dfh!=0' class="jiaobiao">{{num.dfh}}</div>

                    <img class="img2" src="../../assets/img/mine/order2.png">
                    <p>待发货</p>
                </div>
                <div class="order-foot-item" @click="order3">
                     <!-- <div class="jiaobiao">1</div> -->
                    <img class="img3" src="../../assets/img/mine/order3.png">
                    <p>待收货</p>
                </div>
                <div class="order-foot-item" @click="order4">
                     <!-- <div class="jiaobiao">1</div> -->
                    <img class="img4" src="../../assets/img/mine/order4.png">
                    <p>待评价</p>
                </div>
            </div>
        </div>
        <div class="gongju">
            <div class="gongju-tit">我的工具</div>
            <div class="gongju-foot">
                <div class="gongju-item" @click="address">
                    <img class="img5" src="../../assets/img/mine/gongju1.png" />
                    <p>我的地址</p>
                </div>
                <div class="gongju-item" @click="pingjia">
                    <img class="img6" src="../../assets/img/mine/gongju2.png" />
                    <p>我的评价</p>
                </div>
                <div class="gongju-item" @click="shoucang">
                    <img class="img7" src="../../assets/img/mine/gongju3.png" />
                    <p>我的收藏</p>
                </div>
                <div class="gongju-item" @click="kefu">
                    <img class="img8" src="../../assets/img/mine/gongju4.png" />
                    <p>在线客服</p>
                </div>
                <div class="gongju-item" @click="guanyu">
                    <img class="img9" src="../../assets/img/mine/gongju5.png" />
                    <p>关于天健</p>
                </div>
            </div>

        </div>
        <div class='tckf' v-if="showkefu" @click.self="tuichutc">
            <!-- <div class="tckfnr"  >
                <img :src="kfimg" alt="">
                <p>客服微信</p>
            </div>      -->
            <div class="dianhua">
                <!-- <a :href="'tel:' + kfimg" class="dian">{{kfimg}}</a> -->
                <p class="dian" @click="bohao(kfimg)">{{kfimg}}</p>
                <p class="hua">客服电话</p>
            </div>      
        </div>
        </van-pull-refresh>
        <div class="footer"><Footer v-bind:select="select" @activeindex='childerfn'></Footer></div>
    </div>
</template>

<script>
    import Footer from "../footer";
    export default {
        data() {
            return {
                // 下拉刷新
                isLoading:false,
             select: 4,
             details:'',
             showkefu:false,
             kfimg:'',
             num:"",
            }
        },
        components: {
            Footer,
        },
        created() {
            this.getmine()
            this.getnum()
        },
        mounted(){
        
        },
        methods: {
            onRefresh() {
                setTimeout(() => {
                    // Toast('刷新成功');
                    this.getmine()
                    this.getnum()
                    this.isLoading = false;
                }, 1000);
            },
            tuichutc(){
                this.showkefu=false
            },
            // 我的
            getmine(){
                this.$get("api/gzh_order.php?action=user_info", {
                    uid:localStorage.getItem('uid')
                }).then(res => { 
                    this.details = res.data
                }).catch(err => {
                
                });
            },


            getnum(){
                this.$get("api/gzh_timing.php?action=order_count", {
                    uid:localStorage.getItem('uid')
                }).then(res => { 
                    this.num = res.data
                }).catch(err => {
                
                });
            },
            childerfn(index) {
                this.select=index
            },
            // 跳转设置页面
            shezhi(){
                this.$router.push({name:'install'}) 
            },
            // 积分
            jifen(){
                this.$router.push({name:'my-integral'}) 
            },
            // 卡卷
            kajuan(){
                this.$router.push({name:'my-card'}) 
            },
            // 红包
            hongbao(){
                this.$router.push({name:'my-red'}) 
            },
            // 订单
            order(){
                this.$router.push({name:'my-order',params: {select:'0'}}) 
            },
            // 待付款
            order1(){
                this.$router.push({name:'my-order',params: {select:'1'}})
            },
            // 待发货
            order2(){
                this.$router.push({name:'my-order',params: {select:'2'}})
            },
            // 待收货
            order3(){
                this.$router.push({name:'my-order',params: {select:'3'}})
            },
            // 待评价
            order4(){
                this.$router.push({name:'my-order',params: {select:'4'}})
            },
            // 我的地址
            address(){
                this.$router.push({name:'address'}) 
            },
            // 我的评价
            pingjia(){
                this.$router.push({name:'pinglun'}) 
            },
            // 我的收藏
            shoucang(){
                this.$router.push({name:'collect'}) 
            },
            // 在线客服
            kefu(){
                // console.log('客服') 
                this.$get("api/gzh_index.php?action=customer_service", {
                  
                }).then(res => { 
                    
                    console.log(res)
                    // this.showkefu=true
                    this.kfimg=res.data.phone
                    window.location.href = `tel:${res.data.phone}`
                    
                }).catch(err => {

                });
            },
            bohao(kfimg){
                
            },
            // 关于天健
            guanyu(){
                this.$router.push({name:'about'}) 
            },

        },

        mounted () {
           
            this.$islogin()
        },
       
    }
</script>

<style scoped>
.tckf{
    width:100%;
    height:100%;
    background-color: rgb(0, 0, 0,0.4);
    position: fixed;
    top:0;
    left:0;

}
.tckf .img{
    position: fixed;
    top:0;
    left:0;
}
.dianhua{
    width:500px;
    height: 150px;
    position: relative;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    border-radius: 10px;
    text-align: center;
}
.dian{
    font-size: 36px;
    padding-top: 30px;
}
.hua{
    font-size: 20px;
    margin-top: 15px;
}
/* .tckfnr{
    width:500px;
    height: 520px;
    position: relative;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    border-radius: 10px;
    text-align: center;
}
.tckfnr img{
    width:80%;
    margin-top:10%;
}
.tckfnr p{
   font-size: 20px;
} */
.mine{
    width: 100%;
    height: 100%;
}
.header{
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
}
.header-l{
    display: flex;
    align-items: center;
}
.header-l .touxiang{
    width: 94px;
    height: 94px;
    border-radius: 47px;
    background: #ccc;
    margin-left: 30px;
    margin-right: 21px;
    overflow: hidden;
}
.header-l .phone{
    font-size: 38px;
    color: #333;
}
.header-r{
    margin-right: 30px;
}
.header-r img{
    width: 39px;
    height: 36px;
}
.header-r .shezhi{
    margin-right: 33px;
}
.jifen-kajuan-hongbao{
    width: 686px;
    height: 127px;
    margin: auto;
    box-shadow:0 0 9px #ECECEC;
    margin-top: 30px;
    display: flex;
    align-items: center;
}
.jifen-kajuan-hongbao .divs{
    width: 50%;
    text-align: center;
    height: 127px;
}
.jifen-kajuan-hongbao .divs .p1{
    font-size: 34px;
    color: #333;
    margin-top: 15px;
}
.jifen-kajuan-hongbao .divs .p2{
    width: 100%;
    height: 30px;
    font-size: 28px;
    color: #666;
    margin-top: 15px;
}
.jifen-kajuan-hongbao .divs .ka{
    border-left: 1PX solid #e4e4e4;
}

.order{
    width: 100%;
    padding: 0 30px;
    box-sizing: border-box;
}
.order-head{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 45px;
}
.order-head .order-head-l{
    font-size: 38px; 
    color: #333;
    font-weight: bold;
}
.order-head .order-head-r{
    font-size: 28px;
    color: #666;
}
.order-head .order-head-r img{
    width: 12px;
    height: 22px;
    margin-left: 8px;
}
.order-foot{
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
}
.order-foot .order-foot-item{
    width: 25%;
    text-align: center;
    position: relative;
}
.jiaobiao{
    width:30px;
    height: 30px;
    border-radius: 50%;
    background-color: red;
    color: #fff;
    font-size:10px;
    text-align: center;
    line-height: 30px;
    position: absolute;
    right: 30px;
    top:20px;
}
.img1,.img3{
    width: 46px;
    height: 39px;
}
.img2,.img4{
    width: 46px;
    height: 42px;
}
.order-foot .order-foot-item p{
    font-size: 20px;
    color: #333;
}

.gongju{
    width: 100%;
    padding: 0 30px;
    box-sizing: border-box;
    margin-top: 30px;
}
.gongju-tit{
    font-size: 38px;
    color: #333;
    font-weight: bold;
}
.gongju-foot{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 30px;
}
.gongju-item{
    width: 25%;
    height: 150px;
    text-align: center;
}
.gongju-item p{
    font-size: 20px;
    color: #333;
}
.img5{
    width: 41px;
    height: 49px;
}
.img6{
    width: 45px;
    height: 46px;
}
.img7,.img9{
    width: 46px;
    height: 46px;
}
.img8{
    width: 45px;
    height: 47px;
}

.footer{
    position: fixed;
    bottom: 0;
    left:0;
    width:100%;
}
</style>